<!--
 * @Author: [kangjie]
 * @Date: 2022-04-07 14:08:40
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-04-07 14:39:05
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>辅助函数</title>
  <script src="./js/vue-2.6.12.js"></script>
  <script src="./js/vuex-3.5.1.js"></script>
</head>

<body>
  <div id="app">
    {{storeMsg}}--{{storeMsg1}}
    <br>
    {{storeMsgUpper}}--{{storeMsgUpper1}}
    <button @click="changeMsg('test')">提交突变</button>
    <button @click="getMsg('terry')">分发动作</button>
  </div>
  <script>
    // 将辅助函数从状态机中解构出来
    let { mapState,mapActions,mapMutations,mapGetters } = Vuex ;
    // console.log(Vuex,'状态机对象')
    // 辅助函数 专门用来处理状态机属性
    // 生成仓库/状态机 配置对象
    let storeCnf = {
      // 管理组件状态 维护的是公共数据
      state: {
        storeMsg: '状态机中的数据hello',
        storeMsg1: 'world'
      },
      getters: {
        // 派生自state  对state的数据处理之后再返回 类似于computed
        storeMsgUpper(state) { //state是默认参数
          return state.storeMsg.toUpperCase()
        },
        storeMsgUpper1(state) { //state是默认参数
          return state.storeMsg1.toUpperCase()
        }
      },
      // 突变 唯一修改state中数据的一种方式
      mutations: {
        changeMsg(state, payload) {
          state.storeMsg = payload
        }
      },
      // 动作 发送异步请求
      actions: {
        getMsg({ commit, dispatch, state, getters }, payload) {
          commit('changeMsg', payload);
        }
      }
    };
    // 2.生成一个Vuex Store构造函数的状态机
    let store = new Vuex.Store(storeCnf);
    // 3.注册状态机 /仓库
    new Vue({
      el: "#app",
      // 注册仓库
      store,
      data: {

      },
      // 辅助函数-->Vuex状态机提供的
      computed: {
        //  mapState 映射state数据 mapgetters 映射getters数据
        ...mapState(['storeMsg', 'storeMsg1']),
        ...mapGetters(['storeMsgUpper', 'storeMsgUpper1'])
      },
      created() {

      },
      methods: {
        // mapActions 和 mapMutations是写在methods中的
        ...mapActions(['getMsg']),
        ...mapMutations(['changeMsg']),
        // handler(){
        // }
      }
    })
  </script>
</body>

</html>